<template>
	<view class="wanl-comment padding-top-xs">
		<view class="edgeInsetTop"></view>
		<view class="tips margin-bottom-xs bg-white flex flex-direction align-center justify-center">
			<text>服务已完成</text>
			<text>请评价一下为您服务的{{formData.type == 13 ? '医生' : '服务人员'}}吧</text>
		</view>
		<view v-if="goods" class="subject bg-white margin-bottom-xs padding-lr-bj">
			<view class="goods padding-tb-bj">
				<view class="cu-avatar" :style="{ backgroundImage: 'url(' + $wanlshop.oss(goods.image, 40,40) + ')',borderRadius: formData.type == 13 ? '50%' : '' }"></view>
				<view class="content">
					<view class="text-lg text-cut-2">
						<text>{{goods.title}}</text>
					</view>
					<view class="wanl-gray-dark text-price">{{goods.sub_title}}</view>
				</view>
			</view>
			
			<view class="comment padding-top-bj">
				<view class="comment-title margin-right-sm">{{(formData.type == 7 || formData.type == 8) ? '宝贝' : '服务'}}评价</view>
				<view class="comment-operate">
					<view class="item" v-for="(item,index) in dataList" :key="index" :class="{action:formData.state == item.id}"  @tap="stateType(item.id)">
						<text class="iconfont" :class="'icon-haoping'+item.id"></text>
						{{item.name}}
					</view>
				</view>
			</view>
			
			<view class="operate padding-bottom-bj bg-white">
				<view class="score">
					<view class="title wanl-gray-dark margin-right-sm">{{formData.type == 13 ? '医生评分' : '服务人员'}}</view>
					<wanl-rate active="#ff4e02" :quantity="5" :current="formData.score_serves" :size="20" normal="#cad0cc" :hollow="true" @change="(e) => formData.score_serves = e.index"/>
				</view>
				<view class="score">
					<view class="title wanl-gray-dark margin-right-sm">服务态度</view>
					<wanl-rate active="#ff4e02" :quantity="5" :current="formData.score_attitude" :size="20" normal="#cad0cc" :hollow="true" @change="(e) => formData.score_attitude = e.index" />
				</view>
				<view class="score">
					<view class="title wanl-gray-dark margin-right-sm">{{(formData.type == 7 || formData.type == 8) ? '宝贝描述' : '服务描述'}}</view>
					<wanl-rate active="#ff4e02" :quantity="5" :current="formData.score_describe" :size="20" normal="#cad0cc" :hollow="true" @change="(e) => formData.score_describe = e.index" />
				</view>
			</view>
		</view>
		
		<view class="describe bg-white margin-tb-xs">
			<textarea class="padding-bj text-df w100" maxlength="-1" v-model="formData.content" placeholder="请填写相关建议或意见~"></textarea>
		</view>
		<!-- 上传图片 -->
		<view class="upload cu-form-group padding-lr-bj padding-top-sm margin-bottom-xs" v-if="formData.type != 13">
			<view class="grid col-4 grid-square flex-sub">
				<view class="bg-img" v-for="(vo, key) in imgList" :key="key" @tap="viewImage(index,key)">
					<image :src="$wanlshop.oss(vo, 40,40)" mode="aspectFill"></image>
					<view class="cu-tag bg-red" @tap.stop="delImg(index, key)"><text class="wlIcon-31guanbi"></text></view>
				</view>
				<view class="solids" @tap="chooseImage()" v-if="imgList.length < 9">
					<text class="wlIcon-31paishe"></text>
				</view>
			</view>
		</view>
		
		<view class="edgeInsetBottom"> </view>
		<view class="wanlian cu-bar tabbar foot flex justify-between align-center">
			<view class="">
				<!-- <view class="">
					<u-checkbox-group>
						<u-checkbox size="24" v-model="checked" shape="circle" active-color="#4CBD66">
							<text style="color: #333;">匿名</text>
						</u-checkbox>
					</u-checkbox-group>
				</view>
				<text style="color: #aaa;font-size: 20rpx;">匿名会隐藏头像和昵称</text> -->
			</view>
			<view class="cu-btn" @tap="addData()">
				<text class="iconfont icon-fabu wanl-white margin-right-sm"></text>
				<text>发布</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			order_id: 0,
			goods: null,
			
			imgList:[],
			formData:{
				type:'', //  "1": "家政服务","2": "医护上门","3": "陪诊陪护","4": "医养院","6": "圈子","7": "商品","8": "团购","9": "文章","10": "长护险","11": "医生","12": "医院","13": "在线问诊"
				order_id:'',
				source_id:'',
				content:'',
				images:'',
				pid:0,
				state:'',
				score_serves:0,
				score_attitude:0,
				score_describe:0,
			},
			dataList:[],
			checked: false
		};
	},
	onLoad(option) {
		this.order_id = option.order_id;
		this.formData.type = option.t;
		let data = JSON.parse(option.data);
		this.goods = data;
		this.formData.order_id = option.order_id;
		this.formData.source_id = data.source_id
		this.getdatadict()
	},
	methods: {
		async getdatadict() {
			await uni.request({
				url: '/publics/commons/datadictArrays',
				method: 'POST',
				data: {
					datadict_id: '11'
				},
				success: res => {
					this.dataList = res.data[0].item;
				}
			});
		},
		// 提交评论
		async addData() {
			if (this.formData.state == '') {
				this.$wanlshop.msg('请给宝贝评分');
				return false;
			}
			if (this.formData.score_serves == 0 || this.formData.score_attitude == 0 || this.formData.score_describe == 0) {
				this.$wanlshop.msg('请给服务评分');
				return false;
			}
			let formData = this.formData;
			formData.images = this.imgList.join(",");
			formData.goods_id = this.goods.goods_id
			let type = this.formData.type;
			let url = '';
			let t = 0;
			switch (Number(type)){
				case 1:
					url = '/addons/homeking/api.comment/add'
					t = 0;
					break;
				case 2:
					url = '/addons/medicalvisit/api.comment/add'
					t = 1;
					break;
				case 3:
					url = '/addons/accompany/api.comment/add'
					t = 2;
					break;
				case 4:
					url = '/addons/nursing/api.comment/add'
					t = 3;
					break;
				case 13:
					url = '/addons/internethospital/api.comment/add'
					t = 6;
					break;
				default:
					break;
			}
			await uni.request({
				url: url,
				method: 'POST',
				data: formData,
				success: res => {
					this.$wanlshop.msg('评论成功')
					uni.redirectTo({
						url: '/pages/page/success?type=comment&commentType=' + t
					});
				}
			});
		},
		stateType(type){
			this.formData.state = type;
		},
		viewImage(index,key) {
			uni.previewImage({
				urls: this.imgList,
				current: this.imgList[key]
			});
		},
		delImg(index,key) {
			this.imgList.splice(key, 1);
		},
		chooseImage(index) {
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: res => {
					uni.request({
						url: '/wanlshop/common/uploadData',
						success: updata => {
							for (let i = 0; i < res.tempFilePaths.length; i++) {
								// 读取图片宽高
								uni.getImageInfo({
									src: res.tempFilePaths[i],
									success: image => {
										uni.uploadFile({
											url: updata.data.uploadurl,
											filePath: image.path,
											name: 'file',
											formData: updata.data.storage == 'local' ? null : updata.data.multipart,
											success: data => {
												this.imgList.push(JSON.parse(data.data).data.fullurl);
											},
											fail: error =>{
												this.$wanlshop.msg(JSON.parse(error.data).msg);
											}
										});
									}
								});
							}
						}
					});
				}
			});
		}
	}
};
</script>

<style lang="less">
	.edgeInsetBottom {
		height: 100rpx;
		height: calc(var(--window-bottom) + 100rpx);
	}
	.wanlian,.edgeInsetBottom {
		height: calc(132rpx + env(safe-area-inset-bottom)) !important;
	}
	.wanlian {
		justify-content: space-between !important;
		background-color: #fff !important;
		padding: 0 30rpx !important;
	}
	.wanlian.cu-bar.tabbar .cu-btn {
		width: 212rpx;
		height: 72rpx;
		background: #4CBD66;
		border-radius: 10rpx;
		text {
			display: inline-block;
			font-size: 36rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 72rpx;
			&:nth-child(1) {
				font-size: 36rpx;
			}
		}
	}
	.score .title {
		width: auto !important;
	}
	.cu-avatar {
		width: 154rpx;
		height: 154rpx;
	}
	.comment-title {
		width: auto !important;
	}
	.tips {
		height: 132rpx;
		text {
			display: inline-block;
			&:nth-child(1) {
				font-size: 34rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 48rpx;
			}
			&:nth-child(2) {
				font-size: 30rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 42rpx;
			}
		}
	}
	.goods {
		border-bottom: 1rpx solid rgba(182,182,182,0.5);
	}
</style>
